<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>零食小叮当</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/cate.css" rel="stylesheet" type="text/css" />
<link href="css/iscroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;

function loaded() {

	myScroll = new iScroll('wrapper', {
		snap: true,
		momentum: false,
		hScrollbar: false,
		onScrollEnd: function () {
			document.querySelector('#indicator > li.active').className = '';
			document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
		}
	});

}

document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>

<body>
<style type="text/css">
.btn_music{display:inline-block;width:35px;height:35px;background:url('images/play.png') no-repeat center center;background-size:100% auto;position:absolute;z-index:100;left:15px;top:20px;}
.btn_music.on{background-image: url("images/stop.png");}
.welcome{color:#FF3;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript">
var playbox = (function(){
	//author:eric_wu
	var _playbox = function(){
		var that = this;
		that.box = null;
		that.player = null;
		that.src = null;
		that.on = false;
		//
		that.autoPlayFix = {
			on: true,
			//evtName: ("ontouchstart" in window)?"touchend":"click"
			evtName: ("ontouchstart" in window)?"touchstart":"mouseover"
			
		}

	}
	_playbox.prototype = {
		init: function(box_ele){
			this.box = "string" === typeof(box_ele)?document.getElementById(box_ele):box_ele;
			this.player = this.box.querySelectorAll("audio")[0];
			this.src = this.player.src;
			this.init = function(){return this;}
			this.autoPlayEvt(true);
			return this;
		},
		play: function(){
			if(this.autoPlayFix.on){
				this.autoPlayFix.on = false;
				this.autoPlayEvt(false);
			}
			this.on = !this.on;
			if(true == this.on){
				this.player.src = this.src;
				this.player.play();
			}else{
				this.player.pause();
				this.player.src = null;
			}
			if("function" == typeof(this.play_fn)){
				this.play_fn.call(this);
			}
		},
		handleEvent: function(evt){
			this.play();
		},
		autoPlayEvt: function(important){
			if(important || this.autoPlayFix.on){
				document.body.addEventListener(this.autoPlayFix.evtName, this, false);
			}else{
				document.body.removeEventListener(this.autoPlayFix.evtName, this, false);
			}
		}
	}
	//
	return new _playbox();
})();

playbox.play_fn = function(){
	this.box.className = this.on?"btn_music on":"btn_music";
}
</script> 
<script type="text/javascript">
$(document).ready(function(){
	playbox.init("playbox");
	/*
	setTimeout(function() {
		// IE
		if(document.all) {
			document.getElementById("playbox").click();
		}
		// 其它浏览器
		else {
			var e = document.createEvent("MouseEvents");
			e.initEvent("click", true, true);
			document.getElementById("playbox").dispatchEvent(e);
		}
	}, 2000);
	*/
});

</script>
<h1 class="welcome" > <a href="index.html"><img src="images/logo1.png"/></a> <a href="food_category.html" ><img src="images/notes.png" class="gc"/> </a></h1>
<div class="banner" >
  <div id="wrapper">
    <div id="scroller">
      <ul id="thelist">
        <li>
          <p>曲奇饼干</p>
          <a href="javascript:void(0)"><img src="images/3.jpg" /></a></li>
        <li>
          <p>进口核桃</p>
          <a href="javascript:void(0)"><img src="images/4.jpg" /></a></li>
        <li>
          <p>情人梅</p>
          <a href="javascript:void(0)"><img src="images/2.jpg" /></a></li>
        <li>
          <p>馋嘴猫</p>
          <a href="javascript:void(0)"><img src="images/1.jpg" /></a></li>
      </ul>
    </div>
  </div>
  <div id="nav">
    <ul id="indicator">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="clr"></div>
</div>
<div class="mainmenu"> <img src="images/5_top.jpg"  height="15" class="sc" />
  <div>
    <ul>
      <li><a href="pro_detail.html" ><img src="images/a14.jpg" />
        <p>元臻 开心果原味无漂白150g </p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a11.jpg" />
        <p>俏嘴巴 酱脖/鸭翅18g*30包</p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a5.jpg" />
        <p>一件代发劲仔小鱼15g*20盒</p>
        </a></li>
    </ul>
    <img src="images/5_gc.jpg" height="19"  class="gc"/> </div>
  <div>
    <ul>
      <li><a href="pro_detail.html" ><img src="images/a12.jpg" />
        <p>内蒙古特产 麻辣牛板筋 独立小包装</p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a10.jpg" />
        <p>金莎巧克力散装 </p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a13.jpg" />
        <p>休闲肉类零食手撕猪肉干</p>
        </a></li>
    </ul>
    <img src="images/5_gc.jpg" height="19"  class="gc"/> </div>
  <div>
    <ul>
      <li><a href="pro_detail.html" ><img src="images/a8.jpg" />
        <p>泰国原装进口可尼斯品牌多种口味花生豆</p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a1.jpg" />
        <p>奶油/盐焗味薄皮巴旦木批发坚果</p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a6.jpg" />
        <p>草莓干散货无添加零食冻干草莓脆 </p>
        </a></li>
    </ul>
    <img src="images/5_gc.jpg" height="19"  class="gc"/> </div>
  <div>
    <ul>
      <li><a href="pro_detail.html" ><img src="images/a7.jpg" />
        <p>新疆薄皮核桃 新货原味大核桃</p>
        </a></li>
      <li><a href="pro_detail.html" ><img src="images/a9.jpg" />
        <p>陈源昌巴西松子手剥薄壳</p>
        </a></li>
    </ul>
    <img src="images/5_gc.jpg" height="19"  class="gc"/> </div>
  <img src="images/5_bottom.jpg"  height="8" class="bottom" /> </div>
<script type="text/javascript">
var count = document.getElementById("thelist").getElementsByTagName("img").length;	

var count2 = document.getElementsByClassName("menuimg").length;
for(i=0;i<count;i++){
	document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
}
document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";

setInterval(function(){
	myScroll.scrollToPage('next', 0,400,count);
},3500 );

window.onresize = function(){ 
	for(i=0;i<count;i++){
		document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
	}
	document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
}
</script>
<div class="copyright">Copyright © 2014-2015 <a href="#">Zoe</a> All rights reserved.</div>
<br>
<br>
<style type="text/css">
.top_bar{position:fixed;z-index:900;bottom:-1px;left:0;right:0;}
.top_menu{
	border-top:1px solid #b3b3b3;width:100%;height:40px;margin:0;padding:0;
	
	background:rgba(255, 255, 255, 0.7);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:-o-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
}
.top_bar .top_menu>li{
	position:relative;text-align:center;display:inline-block;width:25%;float:left;
	
	background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:-o-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -o-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
}
.top_bar .top_menu li a label{padding:3px 0 0 3px;font-size:12px;overflow:hidden;}
.top_menu>li:first-child{background:none;}
.top_bar .top_menu>li>a{height:40px;line-height:40px;display:block;text-align:center;color:#4f4d4f;text-shadow:0 1px rgba(255, 255, 255, 0.3);text-decoration:none;border-top:1px solid #f9f9f9;}
.top_bar .top_menu>li>a p{overflow:hidden;margin:0 0 0 0;font-size:12px;display:block!important;line-height:18px;text-align:center;}
.top_bar .top_menu>li>a img{padding:0;height:20px;width:20px;color:#fff;line-height:40px;vertical-align:middle;}
.top_bar .top_menu>li>a:hover,.top_bar .top_menu>li>a:active{background-color:#CCCCCC;}
</style>
<div class="top_bar">
  <nav>
    <ul id="top_menu" class="top_menu">
      <li><a href="index.html"><img src="images/plugmenu6.png">
        <label>零食铺子</label>
        </a></li>
      <li><a href="tel:13888888888"><img src="images/plugmenu1.png">
        <label>联系店主</label>
        </a></li>
      <li><a href="mypocket.html"><img src="images/plugmenu8.png">
        <label>我的口袋</label>
        </a></li>
      <li><a href="personal.html"><img src="images/person.png">
        <label>个人中心</label>
        </a></li>
    </ul>
  </nav>
</div>
</body>
</html>